<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" type="text/css" href="../css/default.css"/>
    <link rel="stylesheet" type="text/css" href="../css/css.css"/>
    <link rel="stylesheet" type="text/css"
          href="../jquery/redmond/jquery-ui-1.9.0.custom.min.css"/>
    <script type="text/javascript" src="../jquery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript"
            src="../jquery/jquery-ui-1.9.0.custom.min.js"></script>
    <script type="text/javascript"
            src="../jquery/jquery.ui.datepicker-zh-CN.js"></script>
    <script type="text/javascript" src="../jquery/jquery-extends.js"></script>
    <script>
        var curPage = 1, pageSize = 20, totalPage = 1;

        function loadLogs(postdata) {
            $.ajax({
                url:"../../storageLog/paging.htm",
                type:"POST",
                cache:false,
                data:postdata,
                dataType:"json",
                success:function (data, textStatus, jqXHR) {
                    $("#logs").find("tr:gt(0)").remove();
                    if (data != null && data != "") {
                        totalPage = Math.ceil(parseInt(data.totalCount)
                                / pageSize);

                        if (curPage <= 1) {
                            $('#firstBtn').attr('disabled', "true");
                            $('#preBtn').attr('disabled', "true");
                        } else {
                            $('#firstBtn').removeAttr("disabled");
                            $('#preBtn').removeAttr("disabled");
                        }

                        if (curPage < totalPage) {
                            $('#nextBtn').removeAttr("disabled");
                            $('#lastBtn').removeAttr("disabled");
                        } else {
                            $('#nextBtn').attr('disabled', "true");
                            $('#lastBtn').attr('disabled', "true");
                        }
                        var html = "";
                        for (var i = 0; i < data.data.length; i++) {
                            html += "<tr><td>" + data.data[i].logtime +
                                    "</td><td>" + data.data[i].username +
                                    "</td><td>" + data.data[i].remark +
                                    "</td></tr>";
                        }


                        $("#logs").append(html);

                        $('table tr:even').addClass('hover');
                    }
                }
            });
        }

        $(function () {
            $('.datepicker').datepicker();
            $("input#startDate").datepicker("setDate", "-1d");
            $("input#endDate").datepicker("setDate", "+0d");

            $('#firstBtn').click(function (event) {
                curPage = 1;
                $('#search').trigger('click', false);
            });

            $('#preBtn').click(function (event) {
                if (curPage > 1) {
                    curPage--;
                }

                $('#search').trigger('click', false);
            });

            $('#nextBtn').click(function (event) {
                if (curPage < totalPage) {
                    curPage++;
                }
                $('#search').trigger('click', false);
            });

            $('#lastBtn').click(function (event) {
                curPage = totalPage;
                $('#search').trigger('click', false);
            });

            $('#search').click(function (event, isFirstPage) {
                if (typeof (isFirstPage) == 'undefined') {
                    curPage = 1;
                }

                var start = $('#startDate').val();
                var end = $('#endDate').val();
                if (start.length > 0 && !validate_date(start)) {
                    $.alert('起始日期的格式错误，应为"yyyy-mm-dd"格式', '提示');
                    return;
                }

                if (end.length > 0 && !validate_date(end)) {
                    $.alert('截止日期的格式错误，应为"yyyy-mm-dd"格式', '提示');
                    return;
                }

                loadLogs({
                    start:(curPage - 1) * pageSize,
                    limit:pageSize,
                    startDate:start,
                    endDate:end
                });
            });
            var start = $('#startDate').val();
            var end = $('#endDate').val();
            loadLogs({
                start:(curPage - 1) * pageSize,
                limit:pageSize,
                startDate:start,
                endDate:end
            });
        });


    </script>
</head>
<body>
<div style="padding: 5px;">
    <label for="startDate">起始日期:</label><input id="startDate"
                                               name="startDate" class="datepicker"/> <label
        for="endDate">截止日期:</label><input
        id="endDate" name="endDate" class="datepicker"/>
    <button id="search">查询</button>
</div>
<table id="logs" cellpadding="0" cellspacing="0">
    <caption>操作日志</caption>
    <thead>
    <tr>
        <th>操作时间</th>
        <th>操作人</th>
        <th>操作内容</th>
    </tr>
    </thead>
</table>
<div style="text-align: right; padding: 5px;">
    <button id="firstBtn">首页</button>
    <button id="preBtn">上一页</button>
    <button id="nextBtn">下一页</button>
    <button id="lastBtn">尾页</button>
</div>
</body>
</html>